/**
 * Created by ziyu on 17/5/8.
 */

import React from 'react'
import Styles from './Index.less'
import SearchStyle from '../../common/less/search.less'
import {Button, Col, Form, Input, message, Modal, InputNumber} from 'antd'
import List from './List'
import Search from '../../common/components/Search'
import Detail from './Detail'
import moment from 'moment'
import tel from '../../../assets/tel.png'
import {fetchPost} from '../../../utils/request'

const FormItem = Form.Item

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      params: {
        type: '',
        status: '',
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD'),
      },
      searchParams: {
        list: [
          {
            name: 'Call status',
            type: 'select',
            key: 'outboundStatus',
            className: 'pr20',
            values: [
              {value: '', name: 'Please Select'},
              {value: '0', name: '未呼叫'},
              {value: '1', name: '呼叫成功'},
              {value: '2', name: '呼叫失败'},
            ],
            // defaultValue: '0',
          },
          {
            name: 'Date',
            type: 'range',
            key: ['startDate', 'endDate'],
            className: 'pr20',
            placeHolder: '',
            values: [
              moment(),
              moment(),
            ]
          },
          {
            name: '',
            type: 'search',
            key: '',
            className: 'pr20',
            values: []
          }
        ],
        api: ''
      },
      list: [],
      pendingCount: null,
    }
  }

  componentDidMount() {
  }

  componentWillReceiveProps(props) {
  }

  chooseOrder(data) {
    let item = data.item
    this.setState({
      item: item
    })
  }

  changeParams(params) {
    this.setState({
      params,
    }, () => {

    })
  }

  handleDoCall() {
    this.props.form.validateFields((error, values) => {
      if (!error) {
        let params = {
          overdueDays: values.overdueDays,
          callSize: values.callSize,
        }
        fetchPost('/collection/outbound/addPlan/submit', params).then((res) => {
          if (res.code === 0) {
            this.setState({
              visible: false,
            })
            this.props.form.resetFields()
          } else {
            message.error(res.msg)
            this.setState({
              visible: false,
            })
            this.props.form.resetFields()
          }
        })
      }
    })
  }

  getCount(e) {
    let form = this.props.form
    form.setFieldsValue({
      'pendingCount': null
    })
    let overdueDays = e.target.value
    if (overdueDays) {
      fetchPost(`/collection/outbound/addPlan/count`, {overdueDays}).then((res) => {
        if (res.code === 0) {
          this.setState({
            pendingCount: res.data.count != null ? (res.data.count + '') : null,
          })
          form.setFieldsValue({
            'pendingCount': (res.data.count != null ? (res.data.count + '') : null)
          })
        } else {
          message.error(res.msg)
          this.setState({
            pendingCount: null,
          })
        }
      })
    }
  }


  render() {
    const formItemLayout = {
      labelCol: {span: 8},
      wrapperCol: {span: 12},
    }
    const {getFieldDecorator} = this.props.form

    return (
      <div className={Styles.box}>
        <Modal title="Add Outbound" visible={this.state.visible} onOk={() => {
          this.handleDoCall()
        }} onCancel={() => {
          this.setState({
            visible: false,
          })
        }}>
          <Form horizontal>
            {/*<FormItem*/}
            {/*  {...formItemLayout}*/}
            {/*  label='Product'*/}
            {/*>*/}
            {/*  <div>CASHMAMA</div>*/}
            {/*</FormItem>*/}

            <FormItem
              {...formItemLayout}
              label="Overdue days"
            >
              {getFieldDecorator('overdueDays', {
                rules: [
                  {required: true, message: 'Please enter the correct overdue days'},
                  {pattern: /^-?[0-9]\d*$/, message: 'Please enter the correct integer'}
                ]
              })(
                <InputNumber min={-14} max={30} style={{width: '100%'}} placeholder='Min. -14, Max. 30, for example -2'
                             onBlur={(e) => this.getCount(e)}/>
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label='Number of pending calls'
            >
              {getFieldDecorator('pendingCount', {
                rules: [
                  {required: true, message: 'Querying, please wait'},
                ]
              })(
                <Input disabled='disabled'/>
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="Maximum number of calls"
            >
              {getFieldDecorator('callSize', {})(
                <Input/>
              )}
            </FormItem>

          </Form>
        </Modal>
        <div className={SearchStyle.searchClass}>
          <Search searchParams={this.state.searchParams} changeParams={(params) => this.changeParams(params)}/>
        </div>

        <Button style={{marginLeft: 10}} type="primary">
          <img src={tel} style={{width: '28px', height: '28px'}} onClick={() => {
            this.setState({
              visible: true,
              pendingCount: null,
            })
          }} alt=""/>
        </Button>

        <div className={Styles.detailWrapper}>
          <Col span={14}>
            <div className={Styles.listClass}>
              <div>
                <List
                  params={this.state.params}
                  chooseOrder={(params) => this.chooseOrder(params)}
                />
              </div>
            </div>
          </Col>

          <Col span={10}>
            <div className={Styles.detailClass}>
              <Detail
                item={this.state.item}
                params={this.state.params}
              />
            </div>
          </Col>

        </div>

      </div>
    )
  }
}

Index = Form.create()(Index)
export default Index
